import { useParams } from "react-router-dom"
import { getQuestionService } from "../services/question"
import { useRequest } from "ahooks"
import { useEffect } from "react"
import { useDispatch } from "react-redux"
import { resetComponents } from "../store/componentsReducer"
import { resetPageInfo } from "../store/pageInfoReducer"

function useLoadQuestionData() {
    // 使用useParams获取问卷id，因为id是拼接在url上的
    const { id = "" } = useParams()
    const dispatch = useDispatch()

    // ajax 加载数据
    const { data, loading, error, run } = useRequest(
        async (id: string) => {
            if (!id) throw new Error("没有问卷id")

            const data = await getQuestionService(id)

            return data
        },
        {
            manual: true
        }
    )
    // 根据获取的data，设置store
    useEffect(() => {
        if (!data) return

        const { title = "", desc = "", js = "", css = "", isPublished = false, componentList = [] } = data
        console.log(title)

        // 获取默认的selected（默认选中第一个）
        let selectedId = ""
        if (componentList.length > 0) {
            selectedId = componentList[0].fe_id
        }

        // 问卷标题和组件属性是分开存储的，这里先不管问卷标题
        // 把componentList存储到redux store中（初始化数据）
        // copiedComponent是后添加的，用于存储拷贝的组件信息
        dispatch(resetComponents({ componentList, selectedId, copiedComponent: null }))

        // 把pageInfo 存储到 redux store（初始化数据）
        dispatch(resetPageInfo({ title, desc, js, css, isPublished }))
    }, [data])

    // 判断id变化，执行ajax重新加载问卷数据
    useEffect(() => {
        // 如果id变化 就重新加载数据
        run(id)
    }, [id])

    return { loading, error }
}

export default useLoadQuestionData
